<template>
	<div>
		<div style="display:flex;align-items: center;">
			<div style="width:9%;display:flex;justify-content: flex-end; align-items: center;" @click="back">
				<van-icon name="arrow-left" size='26' />
			</div>
			<div style="width:91%;display: flex;align-items: center;">
				<form action="/" style="width: 100%;">
					<van-search v-model="sortValue" show-action placeholder="智能积木 越野四驱车" @search="onSearch">
						<template #action>
							<div @click="onSearch">搜索</div>
						</template>
					</van-search>
				</form>
			</div>
			<!-- <div style="width:10%;display: flex;align-items: center;"><P style="font-weight:unset; font-size:17px;">搜索</P></div> -->
		</div>
		<!-- 热门搜索 -->
		<cySearch :cySearchz="searchliset" color></cySearch>
		<div style="display:flex;flex-wrap: wrap;padding-left: 0.5rem;">

			<colorBag :item='item' :index="index" v-for="(item,index) in searchliset" :key="index+''" color
				@findclick='onclicks(index)'></colorBag>


		</div>
		<sortjl :sortjlz="sortlist"></sortjl>
		<!-- 常用分类 -->
		<div style="display:flex;flex-wrap: wrap;padding-left: 0.5rem;">
			<colorBag :item='item' :index="index" v-for="(item,index) in sortlist" :key="index+''" :color='false'
				@findonkclick='onfenlei(index)'></colorBag>
		</div>


		<div style="height: 0.6rem;background-color: #CCCCCC;"></div>
		<!-- 搜索记录-->
		<sortRecordym :sortRecordz="sortRecord"></sortRecordym>
		<div style="height:5rem;"></div>
	</div>
</template>
<script>
	import colorBag from '../components/Searchym/colorBag.vue'
	import cySearch from '../components/Searchym/cySearch.vue'
	import sortjl from '../components/Searchym/sortjl.vue'
	import sortRecordym from '../components/Searchym/sortRecordym.vue'
	export default {
		data() {
			let liset = ["小米", "小米8屏幕指纹版"]
			if (window.localStorage.getItem("historyList") !== null) {
				liset = window.localStorage.getItem("historyList").split(',')
			}
			return {
				sortValue: '',
				searchliset: ['领劵中心', 'Redmi K20', 'RedmiBook 14', '智能积木 越野四驱车', '手环 腕表'],
				sortlist: ['耳机', '手机', '音响', '手表', '配件', '网关/传感器', '健康', '酷玩'],
				sortRecord: liset || []
			}
		},
		components: {
			cySearch,
			sortjl,
			sortRecordym,
			colorBag
		},
		methods: {

			back() {
				this.$router.go(-1)
			},
			onSearch() {
				console.log("错误");
				if (this.sortValue == "") {
					alert('搜索栏不能为空')
				} else {
					this.sortRecord = [this.sortValue, ...this.sortRecord];
					window.localStorage.setItem("historyList", this.sortRecord)
					console.log(window.localStorage.getItem("historyList"))
					this.$router.push({
						name: "SearchList",
						query: {
							search: this.sortValue
						}
					});

					this.sortValue = null
				}
			},
			onclicks(indexs) {
				this.sortValue = this.searchliset[indexs]
				this.onSearch()
				console.log(indexs)

				this.$router.push({
					name: "SearchList",
					query: {
						search: this.searchliset[indexs]

					}
				});

			},
			onfenlei(indexs) {
				this.sortValue = this.sortlist[indexs]
				this.onSearch()
				console.log(indexs)
				this.$router.push({
					name: "SearchList",
					query: {
						search: this.sortlist[indexs]
					}
				});
			}
		}
	}
</script>

<style>
	.liclass {
		border-bottom: 1px solid #CCCCCC;
		padding-left: 0.5rem;
		list-style: none;
		line-height: 3rem;
	}

	.pclass {
		font-weight: 600;
		font-size: 1.1rem;
		padding-left: 0.5rem;
		border-bottom: 1px solid #CCCCCC;
		line-height: 3rem;
	}

	.itemcolor {
		background-color: #F5F5F5;
		color: #717171;
		text-align: center;
		margin: 0.3rem;
		padding: 0.5rem;

	}
</style>
